<template>
  <div>
    <el-table border stripe :data="userInfoList">
      <el-table-column align="center" type="index" label="#" width="100px">
      </el-table-column>
      <el-table-column prop="registe_time" label="注册日期" width="width">
      </el-table-column>
      <el-table-column prop="username" label="用户姓名" width="width">
      </el-table-column>
      <el-table-column prop="city" label="注册地址" width="width">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="currentChange"
      :current-page="page"
      :page-sizes="[20, 30, 50]"
      :page-size="limit"
      layout="prev, pager, next, jumper,->,sizes,total"
      :total="totalNum"
      background
    >
      :pager-count="7">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "userList",
  data() {
    return {
      userInfoList: [],
      page: 1,
      limit: 20,
      totalNum: 0,
      offset: 0,
      size: 0
    };
  },
  mounted() {
    this.getUserInfoList();
    this.getUserCount();
  },
  methods: {
    //获取用户信息列表
    async getUserInfoList() {
      const userInfoList = await this.$store.dispatch(
        "dataManage/getUserInfoListData",
        { limit: this.limit, offset: this.offset }
      );
      this.userInfoList = userInfoList;
    },
    //获取用户数量
    async getUserCount() {
      const userCount = await this.$store.dispatch("dataManage/getUserCount");
      this.totalNum = userCount;
    },
    //改变每页条数
    handleSizeChange(size) {
      this.limit = size;
      //   this.size = size
      this.getUserInfoList();
    },
    //改变当前页数
    currentChange(page = 1) {
      this.page = page;
      this.offset = page * this.limit;
      this.getUserInfoList();
    }
  }
};
</script>

<style></style>
